<template>
    <div class="container">
         <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="120px" class="demo-ruleForm">
            <el-row class="container"> 
                <el-col :span="12">
                    <el-form-item label="种植基地：" @click.native="select">
                        <el-input placeholder="请输入内容" v-model="ruleForm.plantBaseName"  style="width:300px"></el-input>
                    </el-form-item>
                    <el-form-item label="种植批号：" @click.native="select">
                        <el-input placeholder="请输入内容" v-model="ruleForm.plantBatch"  style="width:300px"></el-input>
                    </el-form-item>
                    <el-form-item label="基源名称：" @click.native="select">
                        <el-input placeholder="请输入内容" v-model="ruleForm.jyName" style="width:300px"></el-input>
                    </el-form-item>
                 </el-col>
                <el-col :span="10">
                    <el-form-item label="种植地块：" @click.native="select">
                        <el-input placeholder="请输入内容" v-model="ruleForm.soilName" style="width:300px"></el-input>
                    </el-form-item>
                    <el-form-item label="种植时间：" @click.native="select">
                        <el-input placeholder="请输入内容" v-model="ruleForm.plantTime"  style="width:300px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="container" STYLE="margin-top:20PX;">
                <el-col :span="12">
                    <el-form-item label="采收方式：">
                        <el-select v-model="ruleForm.reapWay" placeholder="请选择" style="width:300px;">
                            <el-option label="机械" value="机械"></el-option>
                            <el-option label="人工" value="人工"></el-option>
                        </el-select>  
                    </el-form-item>
                    <el-form-item label="采收批号：">
                        <el-input placeholder="请输入内容" v-model="ruleForm.reapBatch"  style="width:300px"></el-input>
                    </el-form-item>
                    <el-form-item label="开始时间：">
                        <el-date-picker
                            v-model="ruleForm.beginTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder
                            style="width:300px"
                        ></el-date-picker> 
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                     <el-form-item label="采收面积：">
                        <el-input placeholder="请输入内容" v-model="ruleForm.reapArea"  style="width:300px"></el-input>
                        <span style="margin-left:20px;">亩</span>
                    </el-form-item>
                    <el-form-item label="负责人：">
                        <el-select v-model="ruleForm.reapUserName" value-key="id" @change="getuser"  placeholder="" >
                            <el-option v-for="item in userAll" :key="item.id" :label="item.name" :value="item">{{item.name}}</el-option>
                        </el-select>
                        <el-button style="margin-left:10px" @click="gouser">种植人</el-button>
                    </el-form-item>
                    <el-form-item label="结束时间：">
                        <el-date-picker
                            v-model="ruleForm.endTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder
                            style="width:300px"
                        ></el-date-picker> 
                    </el-form-item>
                </el-col>
            </el-row>
			
			
			<el-row class="container" STYLE="margin-top:20PX;" v-for="(item,index) in list" :key ="index">
			    <el-col :span="12">
			        <el-form-item label="采收部位：">
			            <el-select v-model="item.reapPart" @change = "getpart(item.reapPart,index)" value-key="id"  placeholder="请选择" style="width:300px;">
			                <el-option v-for="item1 in partlist" :key="item1.id" :label="item1.position" :value="item1">{{item1.position}}</el-option>
			            </el-select>  
			        </el-form-item>
			       <el-form-item label="种苗数量：" prop="reapNumber">
			           <el-input placeholder="请输入" v-model="item.reapNumber"  style="width: 200px">
			               <template slot="append">
			                    <el-select v-model="item.units"  placeholder="单位"  value-key="id"  style="width:80px !important">
			                       <el-option v-for="item2 in unitList" :key="item2.id" :label="item2.name" :value="item2.name">{{item2.name}}</el-option>
			                   </el-select>
			               </template>
			           </el-input>
			           <el-button style="margin-left:10px" @click="gounit">单位管理</el-button>
			       </el-form-item>
			    </el-col>
			    <el-col :span="10">
			         <el-form-item label="产出物名称：">
			            <el-input placeholder="请输入内容" v-model="item.reapName"  style="width:300px"></el-input>
			        </el-form-item>
					<el-form-item label="操作图片：">
						<div @click="handelsuccess(index)">
							<el-upload
					        class="upload-poster"                               
					        action="https://jsonplaceholder.typicode.com/posts/"
					        :show-file-list="false"
					        :on-change="imgPreview1"
					        :auto-upload="false">
					        <img v-if="item.reapImgs != ''" :src="item.reapImgs" class="avatar">
							<!-- <img v-else :src="item.reapImg" class="avatar"> -->
					        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					    </el-upload>
					    jpg、png、gif格式，60x60像素，不超过2MB
						</div>
					    
					</el-form-item>
			    </el-col>
				
			</el-row>
			<el-button @click="add" type="primary" style="margin-top:20px;">
				添加一条
			</el-button>
			<el-form-item class="footerFixed" label-width="0px">
				<el-button type="primary" @click="submitrule('ruleForm')">采收提交</el-button>
			    <el-button type="primary" @click="submitrule1('ruleForm')">全部采收</el-button>
			    <el-button @click="backPage">返回</el-button>
			</el-form-item>
         </el-form> 
         <el-dialog title="选择基源" :visible.sync="dialogTableVisible">
            <el-table
                :data="tableData"
                border
                style="margin-top:20px;"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="plantBaseName" sortable label="基地名称"></el-table-column>
                <el-table-column prop="soilName" sortable label="所属地块"></el-table-column>
                <el-table-column prop="jyName" sortable label="基源名称"></el-table-column>
                <el-table-column prop="batch" sortable label="种植批号"></el-table-column>
				<el-table-column prop="plantTime" sortable label="种植时间"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"    
                            @click="handleSelect(scope.$index, scope.row)"
                        >选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage" :total="total"  @current-change="handleCurrentChange" style="margin-top:20px"></el-pagination>
        </el-dialog>
    </div>
</template>

<script>
    import {plant_findByList,user_findByAll,revovery_part,unit_findByList,reap_save} from "@/request/api"
    export default {
        data(){
            return{
				list:[{
					reapPart:'',
					reapNumber:'',
					units:'',
					reapName:'',
					reapImg:'',
					reapImgs:''
				}],
				unitList:[],
				partlist:[],
				materialImg:'',
                userAll:'',
                tableData:[],
                total:0,
                currentPage:1,
                pagesize:10,
                dialogTableVisible:false,
                ruleForm:{},
                rules:{},
                labelPosition:'right',
				index:""
            }
        },
        mounted(){
			// console.log(this.$route.query)
            this.init()
        },
        methods:{
			gounit(){
				this.$router.push({
					path:'/unit'	
				})
			},
			gouser(){
				this.$router.push({
					path:'/staffsManagement/addedstaff'	
				})		
			},
			handelsuccess(index){
				this.index = index
			},
			add(){
				this.list.push({
					reapPart:'',
					reapNumber:'',
					units:'',
					reapName:'',
					reapImg:'',
					reapImgs:''
				})
			},
			submitrule(){
				this.$confirm('确定要收获吗？', '提示', {
				    confirmButtonText: '确定',
				    cancelButtonText: '取消',
				    type: 'warning'
				}).then(() => {
					let formdata = new FormData
					this.ruleForm.reapStatus = 1
					for(var i=0;i<this.list.length;i++){
					    if(this.list[i].files != "" && this.list[i].files != null){
					        formdata.append("files",this.list[i].files)
					    }
					}
					this.ruleForm.reapDetailList = JSON.stringify(this.list)
					for(var a in this.ruleForm){
					    if(this.ruleForm[a] == null || this.ruleForm[a] == "null"){
					        this.ruleForm[a] = ""
					        formdata.append(a,'') 
					    }else{
					        formdata.append(a,this.ruleForm[a])
					    }
					}
				    reap_save(formdata).then((res)=>{
						this.$notify({
						    title: '提示',
						    message: '收获成功',
						    type: 'success',
						    duration:1000
						});
						this.$router.go(-1)
					})
				})
			},
			getpart(ele,index){

				this.list[index].reapId = ele.id
				this.list[index].reapPart = ele.position
				this.list[index].reapName = ele.name
				// console.log(this.ruleForm)
			},
			submitrule1(){
				this.$confirm('确定要全部收获吗？此操作后该地块需重新种植，请谨慎操作', '提示', {
				    confirmButtonText: '确定',
				    cancelButtonText: '取消',
				    type: 'warning'
				}).then(() => {
					let formdata = new FormData
					this.ruleForm.reapStatus = 2
					for(var i=0;i<this.list.length;i++){
					    if(this.list[i].files != "" && this.list[i].files != null){
					        formdata.append("files",this.list[i].files)
					    }
					}
					this.ruleForm.reapDetailList = JSON.stringify(this.list)
					
					for(var a in this.ruleForm){
					    if(this.ruleForm[a] == null || this.ruleForm[a] == "null"){
					        this.ruleForm[a] = ""
					        formdata.append(a,'') 
					    }else{
					        formdata.append(a,this.ruleForm[a])
					    }
						
					}
				    reap_save(formdata).then((res)=>{
						this.$notify({
						    title: '提示',
						    message: '收获成功',
						    type: 'success',
						    duration:1000
						});
						this.$router.go(-1)
					})
				})
			},
			backPage(){
				this.$router.go(-1)
			},
			imgPreview1(file,fileList) {
			    this.list[this.index].reapImgs =  URL.createObjectURL(file.raw);
			    let fileName = file.name;
			    let regex = /(.jpg|.gif|.png)$/;
			    if (regex.test(fileName.toLowerCase())) {
					this.list[this.index].files = file.raw
					this.list[this.index].reapImg = file.name
			    } else {
			        this.$message.error('请选择图片文件');
			    }
			}, 
            init(){
                plant_findByList({page:this.currentPage}).then((res)=>{
                   this.tableData = res.rows
                   this.total = res.total
                })
                user_findByAll("").then((res)=>{
                    this.userAll = res.data
                })
				unit_findByList('').then((res) => {
				    // if (res.code == 200) {
				        this.unitList = res.data;
				    // }
				});
            },
            select(){
                this.dialogTableVisible = true
            },
            handleSelect(index,row){
                this.dialogTableVisible = false
                this.ruleForm.plantBaseName = row.plantBaseName
                this.ruleForm.soilName = row.soilName
                this.ruleForm.jyName = row.jyName
                this.ruleForm.jyId = row.jyId
                this.ruleForm.plantBatch = row.batch
                this.ruleForm.plantTime = row.plantTime
                revovery_part(this.ruleForm.jyId).then((res)=>{
					this.partlist = res.data
                })
            },
            getuser(ele){
                this.ruleForm.reapUserId = ele.id
                this.ruleForm.reapUserName = ele.name
            },
            handleCurrentChange(val){
                this.currentPage = val
                this.init()
            },
        }
    }
</script>

<style scoped>
 .el-pagination{
    text-align: right;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width:180px;
    overflow: hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .el-upload--text{
      width:180px;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
